.home {
    &_bigData {
      height: calc(100vh - 84px);
      // width: calc(100vw - 200px);
      background-color: #04144c;
      margin: -20px;
      header {
        position: relative;
        height: 80px;
        background: url(../assets/images/head_bg.png) no-repeat top center;
        background-size: 100% 100%;
        .title {
          font-size: 30px;
          color: #fff;
          text-align: center;
          line-height: 70px;
        }
        .showTime {
          position: absolute;
          color: white;
          left: 20px;
          font-size: 16px;
          top: 20px;
        }
        .weather {
          position: absolute;
          color: white;
          right: 20px;
          font-size: 16px;
          line-height: 60px;
          top: 0px;
          width:200px;
          display: flex;
          justify-content: space-between;
          &_img {
            display: flex;
            height: 60px;
            align-items: center;
            justify-content: center;
            img {
              height: 30px;
              widows: 30px;
            }
          }
        }
      }
      .mainbox {
        // width: 100vw;
        height: 100vh;
        padding: 0vh 0.5vw 0;
        display: flex;
      }
  
      .mainbox .column {
        flex: 3;
      }
  
      .mainbox .column:nth-child(2) {
        flex: 5;
        margin: 0 1vw 1vh;
        overflow: hidden;
      }
  
      .panel {
        position: relative;
        height: 25.8vh;
        border: 1px solid rgba(25, 186, 139, 0.17);
        background: rgba(255, 255, 255, 0.04);
        padding: 1vh;
        margin-bottom: 1vh;
      }
  
      .panel::before {
        position: absolute;
        top: 0;
        left: 0;
        content: "";
        width: 15px;
        height: 15px;
        border-top: 2px solid #02a6b5;
        border-left: 2px solid #02a6b5;
        border-radius: 10%;
      }
  
      .panel::after {
        position: absolute;
        top: 0;
        right: 0;
        content: "";
        width: 15px;
        height: 15px;
        border-top: 2px solid #02a6b5;
        border-right: 2px solid #02a6b5;
        border-radius: 10%;
      }
  
      .panel .panel-footer {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
      }
  
      .panel .panel-footer::before {
        position: absolute;
        bottom: 0;
        left: 0;
        content: "";
        width: 15px;
        height: 15px;
        border-bottom: 2px solid #02a6b5;
        border-left: 2px solid #02a6b5;
        border-radius: 10%;
      }
  
      .panel .panel-footer::after {
        position: absolute;
        bottom: 0;
        right: 0;
        content: "";
        width: 15px;
        height: 15px;
        border-bottom: 2px solid #02a6b5;
        border-right: 2px solid #02a6b5;
        border-radius: 10%;
      }
  
      .panel .panel_title {
        height: 2vh;
        line-height: 2vh;
        text-align: center;
        color: #fff;
        font-size: 16px;
        font-weight: 400;
      }
  
      .panel .panel_title a {
        margin: 0 0.5vw;
        color: #fff;
        text-decoration: underline;
      }
       .panel  .panel_title a:hover{
        color:#e18a3b;
       
       }
  
      .panel .chart {
        height: 21vh;
      }
  
      .no {
        background: rgba(101, 132, 226, 0.1);
        padding: 0.5vh;
      }
  
      .no .no-hd {
        position: relative;
        border: 1px solid rgba(25, 186, 139, 0.17);
      }
  
      .no .no-hd::before {
        content: "";
        position: absolute;
        width: 30px;
        height: 20px;
        border-top: 2px solid #02a6b5;
        border-left: 2px solid #02a6b5;
        top: 0;
        left: 0;
      }
  
      .no .no-hd::after {
        content: "";
        position: absolute;
        width: 30px;
        height: 20px;
        border-bottom: 2px solid #02a6b5;
        border-right: 2px solid #02a6b5;
        right: 0;
        bottom: 0;
      }
  
      .no .no-hd ul {
        display: flex;
      }
  
      .no .no-hd ul li {
        position: relative;
        flex: 1;
        text-align: center;
        height:2vh;
        line-height: 2vh;
        font-size: 3vh;
        color: #ffeb7b;
        padding: 0.05vh 0;
        font-family: electronicFont;
        font-weight: bold;
        list-style:none;
      }
  
      .no .no-hd ul li:first-child::after {
        content: "";
        position: absolute;
        height: 2.5vh;
        width: 0.2vh;
        background: rgba(255, 255, 255, 0.2);
        right: 0;
        top: 0;
      }
  
      .no .no-bd ul {
        display: flex;
      }
  
      .no .no-bd ul li {
        flex: 1;
        height: 0.2vh;
        list-style:none;
        line-height:0.3vh;
        text-align: center;
        font-size: 16px;
        color: rgba(255, 255, 255, 0.7);
      }
  
      .map {
        position: relative;
        height: 50vh;
      }
  
      .map .chart {
        position: absolute;
        top: 2vh;
        left: 0;
        right:5vh;
        z-index: 9999 !important;
        height: 90vh;
        width: 82vh;
        // width: 100%;
      }
  
      .map .map1,
      .map .map2,
      .map .map3 {
        position: absolute;
        top: 70%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 60vh;
        height: 60vh;
        background: url("@/assets/images/map.png") no-repeat;
        background-size: 100% 100%;
        opacity: 0.8;
      }
  
      .map .map2 {
        width: 70vh;
        height: 70vh;
        background-image: url("@/assets/images/lbx.png");
        opacity: 0.9;
        animation: rotate 15s linear infinite;
        z-index: 2;
      }
  
      .map .map3 {
        width: 65vh;
        height: 65vh;
        background-image: url("@/assets/images/jt.png");
        animation: rotate1 10s linear infinite;
      }
  
      @keyframes rotate {
        from {
          transform: translate(-50%, -50%) rotate(45  deg);
        }
  
        to {
          transform: translate(-50%, -50%) rotate(360deg);
        }
      }
  
      @keyframes rotate1 {
        from {
          transform: translate(-50%, -50%) rotate(0deg);
        }
  
        to {
          transform: translate(-50%, -50%) rotate(-360deg);
        }
      }
    }
  }